<template>
  <div class="container">
    <!-- 检索区域 -->
    <div class="search-area">
      <div class="search-list">
        <div class="search-segment">
          <a-input-search
            :style="{ width: '320px' }"
            v-model="query.condition.name"
            :max-length="16"
            allow-clear
            placeholder="表单名称"
            search-button
            :button-props="{ type: 'secondary' }"
            long
            @press-enter="onSearch()"
            @search="onSearch()"
          >
            <template #button-icon><icon-search /></template>
          </a-input-search>
        </div>
        <div class="search-segment">
          <a-tooltip content="重置">
            <a-button @click="onSearchReset()"> <icon-refresh /> </a-button>
          </a-tooltip>
        </div>
      </div>
      <div class="btns-list">
        <a-button type="primary" @click="onAdd">
          新建表单
          <template #icon> <icon-plus /> </template>
        </a-button>
      </div>
    </div>

    <div class="flow-inst-area">
      <div class="flow-table-content">
        <a-table
          :columns="columns"
          :data="listFormsData"
          :scrollbar="false"
          :bordered="{ cell: false }"
          :hoverable="false"
          :pagination="false"
          :loading="tableLoading"
          :scroll="{ maxHeight: 'calc(100vh - 227px)', x: 1000 }"
          @page-change="onSearch"
        >
          <template #version="{ record }">
            <a-tag color="red">{{ record.version }}</a-tag>
          </template>
          <template #operations="{ record }">
            <a-link @click="onPreview(record)"> 预览 </a-link>
            <a-divider direction="vertical" />
            <a-link @click="onDesign(record)"> 设计 </a-link>
            <a-divider direction="vertical" />
            <a-link @click="onEdit(record)"> 修改 </a-link>
            <a-divider direction="vertical" />
            <a-popconfirm
              type="warning"
              content="确认删除该流程 ?"
              @ok="onDelete(record, group)"
              position="tr"
            >
              <a-link :disabled="record.isDeploy ? true : false">删除</a-link>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
      <div class="fenye" v-if="query.total > 0">
        <a-pagination
          show-total
          size="small"
          @change="onSearch"
          :total="query.total"
          :page-size="query.pageSize"
          :current="query.pageIndex"
        />
      </div>
    </div>

    <!-- 新建分类 -->
    <form-modal
      ref="formModal"
      v-model:modal="form"
      @ok="onFormAdded($event)"
    ></form-modal>

    <!-- 预览表单 -->
    <preview-modal ref="previewModal" v-model:modal="form"></preview-modal>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";
import { Notification } from "@arco-design/web-vue";
import {
  IconRefresh,
  IconSearch,
  IconPlus,
} from "@arco-design/web-vue/es/icon";
import FlowManApi from "@/api/FlowManApi";
import FormModal from "./modal.vue";
import PreviewModal from "./preview.vue";
import { useRouter } from "vue-router";
const router = useRouter();

const listFormsData = ref([]);
const tableLoading = ref(false);
const query = ref({ pageIndex: 1, pageSize: 15, total: 0, condition: {} });

const columns = ref([
  {
    title: "表单名称",
    dataIndex: "name",
  },
  {
    title: "表单编码",
    dataIndex: "key",
    align: "center",
  },
  {
    title: "分组",
    dataIndex: "groupName",
    align: "center",
  },
  {
    title: "版本",
    dataIndex: "version",
    align: "center",
    slotName: "version",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    width: 180,
  },
  {
    title: "操作",
    width: 260,
    dataIndex: "operations",
    fixed: "right",
    align: "center",
    slotName: "operations",
  },
]);

// 新建
let form = ref({});
let formModal = ref();
const onAdd = () => {
  form.value = {};
  formModal.value.show();
};
// 编辑
const onEdit = (record) => {
  console.log("onEdit", record);
  const formValues = record;
  form.value = { ...formValues };
  formModal.value.show();
};
const onFormAdded = (form) => {
  console.log("onFormAdded", form);
  loadListForms();
};
// 删除
const onDelete = (record) => {
  FlowManApi.deleteFormById(record?.id).then((resp) => {
    if (resp.code == 0) {
      Notification.success("删除成功");
      loadListForms();
    }
  });
};

// 搜索
const onSearch = (page) => {
  console.log("onSearch");
  if (page) query.value.pageIndex = page;
  loadListForms();
};
// 重置
const onSearchReset = () => {
  console.log("onSearchReset");
  query.value = { pageIndex: 1, pageSize: 15, total: 0, condition: {} };
  onSearch(1);
};

// 加载list数据
const loadListForms = () => {
  FlowManApi.pageForms(query.value)
    .then((resp) => {
      if (resp.code == 0) {
        listFormsData.value = resp.data.list || [];
        query.value.total = resp.data.total;
      }
      tableLoading.value = false;
    })
    .catch(() => (tableLoading.value = false));
};

// 预览表单
let previewModal = ref();
const onPreview = (row) => {
  form.value = { ...row };
  console.log("onPreview", form.value);
  previewModal.value.show();
};

// 设计表单
const onDesign = (row) => {
  const { id, name } = row;
  router.push({
    path: "/form/design",
    query: { id, name },
  });
  // window.location.href = `https://www.baidu.com`
  // const url = `http://203.33.215.198:9081/#/designForm`
  // window.open(url, '_blank');
};

onBeforeMount(() => {
  loadListForms();
});
</script>
